﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/mui.min.css">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <style>
        body {
            background: #f3f3f3;
        }

        .me_01 {
            background: #23c788;
            overflow: hidden;
            width: 100%;
            padding: 8% 0;
            position: relative;
        }

        .me1_i1 {
            border-radius: 50%;
            width: 20%;
            border: 2px solid #f4f5f9;
            display: block;
            margin: 0 auto;
            margin-bottom: 2%;
        }

        .me1_s1 {
            display: block;
            text-align: center;
            color: #F4F5F9;
            font-size: 1.8rem;
            margin-bottom: 1%;
        }

        .me1_s2 {
            font-size: 1.5rem;
            color: #f4f5f9;
            text-align: center;
            display: block;
        }

        .me1_d1 {
            border-radius: 30px;
            width: 35%;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.8);
            padding: 1.5% 0;
            border: 2px solid #0cc076;
            position: absolute;
            top: 15%;
            right: -8%;
        }

        .me1_i2 {
            display: block;
            float: left;
            width: 15%;
            margin-left: 7%;
            margin-right: 5%;
        }

        .me1_s3 {
            display: block;
            float: left;
            color: #23c788;
            font-size: 1.4rem;
        }

        .me_02 {
            width: 100%;
            overflow: hidden;
            padding: 4.5% 0;
            background: #fff;
            margin-bottom: 2%;
        }

        .me2_s1 {
            display: block;
            float: left;
            width: 50%;
            font-size: 1.5rem;
            text-align: center;
        }

        .mui-table-view-cell:after {
            height: 0;
        }

        .me3_i1 {
            width: 8%;
            display: block;
            float: left;
            margin-right: 5%;
            margin-top: 1.5%;
        }

        .me3_s1 {
            font-size: 1.6rem;
            margin-top: 3%;
            display: block;
        }

        .vult_04 {
            position: fixed;
            width: 100%;
            z-index: 9999999;
            border-top: 1px solid #d3d3d3;
            background: #ffffff;
            bottom: 0;
            height: 6rem;
        }

        .vult4_i1 {
            display: block;
            width: 0.1rem;
            float: left;
        }

        .vult4_d1 {
            width: 49%;
            float: left;
            margin-right: 1%;
        }

        .vult4_d2 {
            width: 49%;
            float: right;
        }

        .vult4_i2 {
            width: 14%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }

        .vult4_i3 {
            width: 12%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }

        .vult4_s1 {
            color: #0bc886;
            font-size: 1.6rem;
            display: block;
            text-align: center;
            margin-top: 3%;
        }
    </style>
</head>
<body>
    <div id="user" v-cloak style="margin-bottom:49px;">

        <header data-am-widget="header" class="am-header am-header-default" style="background-color: #FFFFFF; border-bottom: 1px solid rgb(211, 211, 211);">
            <div class="am-header-left am-header-nav" onclick="goBack()">
                <a href="javascript:" class="">
                    <img class="am-header-icon-custom" src="images/veas07.png" alt="" />
                </a>
            </div>
            <h4 class="am-header-title" style=" color: black; line-height: 2.5;">教练中心</h4>
            <div class="am-header-right am-header-nav"><a href="/Wap/Index.html" class="am-header-icon am-icon-home" style="color: #A9A9A9; "></a></div>
        </header>

        <div class="me_01" id="me_01">
            <img v-bind:src="userinfo.headImg!=null?userinfo.headImg:'images/nouserfaceimg.png'" alt="" class="me1_i1">
            <span class="me1_s1">{{userinfo.nickName!=null?userinfo.nickName:'暂无昵称'}}</span>
            <span class="me1_s2">{{userinfo.province}}{{userinfo.city}}</span>
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="TrainCoachInfo.html">
                    <img src="images/me02.png" alt="" class="me3_i1">
                    <span class="me3_s1">我的培训班</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="PrivateCoachInfo.html">
                    <img src="images/me02.png" alt="" class="me3_i1">
                    <span class="me3_s1">我的私教</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/common.js"></script>
<script src="js/vue.js"></script>
<script src="js/mui.min.js"></script>
<script src="https://use.fontawesome.com/ca6b609d64.js"></script>
<script src="js/zishiying.js"></script>
<script>
    var page = new Vue({
        el: '#user',
        data: {
            userinfo: [],
        },
        methods: {
            getUserInfo: function () {
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: apiUrl + '/Api/Mine/GetMyInfo',
                    success: function (data) {
                        console.log(data);
                        if (data.errcode == 0) {
                            that.userinfo = data.data;
                            console.log(that.userinfo)
                        } else {
                        }
                    },
                })
            }
        }
    });
    $(function () {
        page.getUserInfo();
    })
</script>
